<template>
  <div class="newaddress">
    <div class="newaddress_title">
      <router-link to="/Address">
        <div class="left iconfont icon-arrow-left"></div>
      </router-link>
      <div class="my_ads">修改收货地址</div>
      <div class="new"></div>
    </div>
    <van-address-edit
      class="adres"
      :area-list="areaList"
      show-postal
      show-delete
      :address-info="addressInfo"
      show-set-default
      :columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete(storageData.id)"
      @change-default="isDefault"
    />
  </div>
</template>

<script setup>
import { Dialog } from 'vant';
import { AddressEdit } from 'vant';
import { areaList } from '@vant/area-data';
import { ref } from 'vue'

import { get, delcar, addToCart, post } from '../../utils/request.js'
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()

let storageData = JSON.parse(sessionStorage.getItem('addressItem'))

// 获取到要修改得信息
let addressInfo = ref({
  name: storageData.name,
  tel: storageData.phone,
  areaCode: storageData.area,
  addressDetail: storageData.desc,
  postalCode: storageData.post_code,
  isDefault: storageData.default_set === '1' ? true : false
})
console.log(storageData);


// 修改信息后保存
const onSave = async (Data) => {
  console.log(Data);
  let token = sessionStorage.getItem('token')
  let data = {
    name: Data.name,
    phone: Data.tel,
    area: Data.areaCode,
    area_name: Data.province + Data.city + Data.county,
    desc: Data.addressDetail,
    post_code: Data.postalCode,
    status: "1",
  }
  console.log(data);
  let id = storageData.id
  let res = await addToCart(`/address/${id}`, token, data)
  Dialog.alert({ message: '保存成功' }).then(() => { router.push('/Address') })
  console.log(res);
}




// 删除地址
const onDelete = (id) => {
  let token = sessionStorage.getItem('token')
  delcar(`/address/${id}`, token).then(res => {
    console.log(res);
    Dialog.alert({ message: '删除成功' }).then(() => {
      router.push('/Address')
    })
  })
}


// 设置为默认地址
const isDefault = async (chouse) => {
  console.log(chouse);
  let data = {
    chouse
  }
  let id = storageData.id
  let res = await post(`/setDefault/${id}`, data)
}




</script>

<style lang="scss" scoped>
.newaddress {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.newaddress_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.44rem;

  .left {
    margin-left: 0.184rem;
    width: 0.2rem;
    height: 0.16rem;
    font-size: 0.2rem;
    line-height: 0.16rem;
  }

  .new {
    margin-right: 0.18rem;
    width: 0.28rem;
    height: 0.2rem;

    line-height: 0.2rem;
    text-align: center;
    font-size: 0.14rem;
  }

  .my_ads {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
  }
}

.msg {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 2.24rem;

  margin-top: 0.12rem;

  li {
    margin: 0.16rem 0;
    display: flex;
    align-items: center;
    margin-left: 0.18rem;
    width: 3.57rem;
    height: 0.4rem;

    font-size: 0.14rem;
    color: #666666;

    input {
      width: 2.37rem;
      height: 0.4rem;
      border: none;
      outline: none;
      font-size: 0.14rem;
    }
  }
}
.adres {
  width: 3.7rem;
}
</style>